<template>
	<view class="bind-bank-card" :style="{'--fontSize':fontSize+'rpx'}">
		<g-navbar title="绑定银行卡" />
		<view class="main">
			<view class="input-module-wrapper">
				<view class="input-item">
					<view class="label">
						选择银行
					</view>
					<view class="input-wrapper" @click="selectBankType">
						<g-input type="other" inputType="text" placeholder="请选择银行" inputDisabled
							v-model="formData.bank_name" ref="inputRef" />
						<i class="iconfont icon-arrow-right icon" />
					</view>
				</view>
				<view class="input-item">
					<view class="label">
						银行卡号
					</view>
					<view class="input-wrapper">
						<g-input type="other" inputType="number" placeholder="请输入银行卡号" v-model="formData.bank_no" />
					</view>
				</view>
			</view>
		</view>
		<g-button btn_text="确定" :width="686" :height="104" :disabled="isBtnDisabled" style="margin-top: 100rpx;"
			@click="bind" />
	</view>
</template>

<script lang="ts" setup>
	import { computed, reactive, ref } from "vue";
	import { useStore } from 'vuex';
	import REST_URL from "@/http/http.restUrl";
	import { ROUTE_TYPE } from '@/enum/router';
	import { GET_STORE_USERINFO } from '@/store/gettersType';
	
	
	const store = useStore();

	const inputRef = ref(null);

	const fontSize = computed(() => {
		const scale = (uni.getWindowInfo().windowWidth / 375) < 1 ? uni.getWindowInfo().windowWidth / 375 : 1;
		return 32 * scale;
	})

	console.log(fontSize.value)



	uni.$off('selectBankCardType');
	uni.$on('selectBankCardType', (bankName : string) => {
		formData.bank_name = bankName;
		setTimeout(() => inputRef.value.update(), 100)
	});

	interface IFromData {
		customer_id : number,
		bank_no : string,
		bank_name : string,
	}

	const formData : IFromData = reactive({
		customer_id: store.getters[GET_STORE_USERINFO].id,
		bank_no: '',
		bank_name: '',
	})

	const isBtnDisabled = computed(() => {
		return !formData.bank_no.length || !formData.bank_name.length
	})

	const selectBankType = () => {
		uni.router.route('/pages_bind/bank_card_type/bankCardType')
	}

	const bind = async () => {
		await uni.http.POST(REST_URL.bindBankCard, formData);
		// uni.navigateBack({
		// 	success: () => {
		// 		uni.prompt.$showToast('上传银行卡信息成功，待审核通过', 5000);
		// 	},
		// 	fail: () => {
		// 		uni.prompt.$showToast('上传银行卡信息成功，待审核通过', 5000);
		// 	}
		// })
		uni.router.route({
			url: '/pages_bind/card_pack/cardPack',
			type: ROUTE_TYPE.REDIRECTTO,
			success: () => {
				uni.prompt.$showToast('上传银行卡信息成功，待审核通过', 5000);
				uni.$emit('updateCardPackList')
			}
		})
	}
</script>

<style scoped lang="scss">
	@import "./bindBankCard.scss";
</style>